<template>
	<view class="owner">
		<view class="w-center" style="padding-bottom: 40rpx;">
			<view class="owner-title df df-justify-content-between df-align-items" style="padding-top: 50rpx">
				<view>1.上传行驶证照片</view>
				<text>仅用于身份认证</text>
			</view>
			<view class="uplod-box df df-justify-content-between">
				<view class="img" @click="uploadJustimg(0)">
					<image src="../../../static/home/z.png" mode="aspectFill" class="bg" v-if="show_z"></image>
					<view class="tx df df-flex-direction-column df-align-items df-justify-content" v-if="show_z">
						<view class="opload-btn df df-justify-content-alin">
							<text class="iconfont icon-paizhao"></text>
						</view>
						<text>行驶证正面</text>
					</view>
					<image v-if="!show_z" :src="f_file[0]" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				</view>
				<view class="img" @click="uploadJustimg(1)">
					<image src="../../../static/home/f.png" mode="aspectFill" class="bg" v-if="show_f"></image>
					<view class="tx df df-flex-direction-column df-align-items df-justify-content" v-if="show_f">
						<view class="opload-btn df df-justify-content-alin">
							<text class="iconfont icon-paizhao"></text>
						</view>
						<text>行驶证反面</text>
					</view>
					<image v-if="!show_f" :src="f_file[1]" mode="aspectFill" style="width: 100%;height: 100%;"></image>
				</view>
			</view>
			<view class="w-center" style="margin: 0 0 30rpx;width: 100%;">
				<view class="owner-title df df-justify-content-between df-align-items"
					style="padding-top: 50rpx;padding-bottom: 40rpx;">
					<view>2.资料填写</view>
					<!-- <text>仅用于身份认证</text> -->
				</view>
				<!-- <view class="data-item df df-justify-content-between" style="padding-bottom: 20rpx;">
					<view class="data-item-label df">
						车主与签约人是否为同一人
					</view>
					<radio-group @change="handle">
						<view class="df">
							<label>
								<view class="is-sel">
									<radio color="#F12F63" style="transform: scale(.8);" :value="1"
										:checked="e_form.is_my == 1" />是
								</view>
							</label>
							<label>
								<view style="padding-left: 60rpx;">
									<radio color="#F12F63" style="transform: scale(.8);" :value="2"
										:checked="e_form.is_my == 2" />否
								</view>
							</label>
						</view>
					</radio-group>
				</view> -->
<!-- 				<view class="data-item df df-justify-content-between" style="">
					<view class="data-item-label df">
						身份证号
						<text style="color: red;">*</text>
					</view>
					<input type="text" placeholder="车主身份证号码(必填)" maxlength="18" placeholder-style="font-size:26rpx"
						v-model="e_form.idcard" style="padding-left: 20rpx;"/>
				</view> -->
				<view class="data-item df df-justify-content-between" style="margin-top: 20rpx;">
					<view class="data-item-label df">
						车险到期月份
						<text style="color: red;">*</text>
					</view>
					<uni-data-picker ref="picker" class="data-picke" placeholder="请选择月份" v-model="e_form.policy_month" popup-title="请选择月份" :localdata="dataTree"
						@change="onchange" :border="false" :clear-icon="false">
					</uni-data-picker>
				</view>
			</view>
			<view class="tips" v-show="s_scuccess">
				请核对以下信息，有误点击修改
			</view>
			<view class="crad-data" v-show="s_scuccess">
				<view class="crad-item df df-justify-content-between">
					<view>车牌号码</view>
					<input type="text" v-model="form.car_no" />
				</view>
				<view class="crad-item df df-justify-content-between">
					<view>车辆类型</view>
					<input type="text" v-model="form.car_type" />
				</view>
				<view class="crad-item df df-justify-content-between">
					<view>所有人</view>
					<input type="text" v-model="form.car_owner" />
				</view>
				<view class="crad-item df df-justify-content-between">
					<view>住址</view>
					<textarea v-model="form.address"></textarea>
				</view>
				<view class="crad-item df df-justify-content-between">
					<view>准载人数</view>
					<input type="text" v-model="form.nums" />
				</view>
				<view class="crad-item df df-justify-content-between">
					<view>使用性质</view>
					<input type="text" v-model="form.use_nature" />
				</view>
				<view class="crad-item df df-justify-content-between">
					<view>品牌型号</view>
					<input type="text" v-model="form.brand_type" />
				</view>
				<view class="crad-item df df-justify-content-between">
					<view>车辆识别代码</view>
					<input type="text" v-model="form.vin" />
				</view>
				<view class="crad-item df df-justify-content-between">
					<view>发动机型号</view>
					<input type="text" v-model="form.engine_type" />
				</view>
				<view class="crad-item df df-justify-content-between">
					<view>注册日期</view>
					<input type="text" v-model="form.register_time" />
				</view>
				<view class="crad-item df df-justify-content-between">
					<view>发证日期</view>
					<input type="text" v-model="form.certificate_time" />
				</view>
			</view>
		</view>
		<!-- <view class="b-gay"></view> -->

		<view class="" style="height: 160rpx;"></view>
		
		<view class="submit-box df df-justify-content-alin">
			<view @click="handlexy">
				<label class="radio df df-align-items df-justify-content">
					<radio :checked="xy" style="transform: scale(.8);" color="#F12F63" />
					<view class="ax">
						我已阅读并签约<text style="" @click.stop="$navigateTo('/pages/home/agreement/agreement')">《会员服务协议》</text>
					</view>
				</label>
			</view>
			<view v-if="!submiting" class="submit-btn" @click="submit">提交</view>
			<view v-else="submiting" class="submit-btn">提交中...</view>
		</view>

		<!--用于图片压缩的canvas画布，不在页面中展示，且id固定不可变-->
		<canvas :style="{width: cw+'px',height: cw+'px'}" canvas-id="zipCanvas" class="canvass"></canvas>
		<!--画布结束-->
		<!--  -->
		

	</view>
</template>

<script>
	import api from '@/api/mine.js';
	import getLessLimitSizeImage from "@/utils/compressImg.js";
	export default {
		data() {
			return {
				submiting: false,
				ADS: '四川省成都市金牛区文汇里文汇创意园602室',
				file: [],
				f_file: ["", ""],
				userinfo: '',
				show_z: true,
				show_f: true,
				s_data: {},
				form: {
					car_no: '', //车牌号
					car_type: '', //车辆类型
					car_owner: '', //车主
					address: '', //地址
					use_nature: '', //使用性质
					brand_type: '', //品牌类型
					vin: '', //车架号
					engine_type: '', //发动机型号
					register_time: '', //注册日期
					certificate_time: '', //发证日期
					insureMatureMonth: ''
				},
				e_form: {
					// is_my: 1,
					idcard: '', // 身份证号
					files: '', //证件照
					policy_month: '' // 车险到期时间
				},
				s_scuccess: false,
				xy: false,
				cw: wx.getSystemInfoSync().windowWidth,
				dataTree: [],  // 年月数据
				month: ""   // 默认 年月
			}
		},
		onLoad() {
			this.userinfo = uni.getStorageSync('userinfo');

			api.getUserInfo().then(res => {
				if (res.code == 1) {};
			});
			
			// #ifdef MP-ALIPAY
			// 支付宝小程序关闭页面下拉(默认开启下拉)
			my.setCanPullDown({
				canPullDown: false
			});
			// #endif
		},
		watch: {
			file(newdata, odata) {
				if (this.f_file.length == 2) {
				}
			},
		},
		created() {
			// 年月数据
			/* for (let i = 2000; i < 2099; i++) {
				let item = [];
				for (let j = 1; j < 13; j++) {
					item.push({
						text: j + "月",
						value: i + '-' + j
					});
				};
				this.dataTree.push({
					text: i + '年',
					value: i,
					children: item
				});
			}; */
			// 月份数据
			for (let j = 1; j <= 12; j++) {
				this.dataTree.push({
					text: j + "月",
					value: j
				});
			};
			// let d = new Date(); //设置一个字符串表示的日期对象
			// let yy = d.getFullYear(); //取满年
			// let mm = d.getMonth() + 1; //取月份
			// this.e_form.policy_month = yy+'-'+mm;   // 取默认值 - 当前月份
			// this.e_form.policy_month = mm;
		},
		methods: {
			//勾选协议
			handlexy() {
				this.xy = !this.xy;
			},
			//是否本人
			handle(e) {
				this.e_form.is_my = e.target.value;
			},
			// 选择图片、压缩
			uploadJustimg(type) {
				let _this = this;
				if (!uni.getStorageSync('userinfo').token) {
					uni.navigateTo({
						url: '/pages/login/login'
					})
				} else {
					uni.chooseImage({
						count: 1,
						sizeType: ['compressed'],
						success: (res) => {
							if (res.errMsg == 'chooseImage:ok') {
								let filePath;
								let fileSize;
								let fileWidth;
								let fileHeight;
								let compressWidth;
								let compressHeight;
								let aspectRatio; //长宽比
								if (type == 0) {
									_this.file[0] = res.tempFilePaths[0];
									filePath = _this.file[0];
								} else {
									_this.file[1] = res.tempFilePaths[0];
									filePath = _this.file[1];
								}
								
								uni.getFileInfo({
									filePath: filePath
								}).then(res => {
									fileSize = res.size;
									if (fileSize > 60000) {
										uni.getImageInfo({
											src: filePath,
											success: function(res) {
												let canvasId =
													'zipCanvas' //注意这里的id和你在页面中写的html代码的canvas的id要一致
												let imagePath = filePath; //原图的路径
												let limitSize = 1; //大小限制2048kb
												let drawWidth = uni.getSystemInfoSync().windowWidth; //初始绘画区域是画布自身的宽度也就是屏幕宽度
												uni.showLoading({
													title: '图片压缩中...',
													mask: true
												});
												getLessLimitSizeImage(canvasId, imagePath,
													limitSize, drawWidth, (
													resPath) => {
														uni.hideLoading();
														_this.upload(resPath, type);
												});
											}
										});
									} else {
										_this.upload(filePath, type);
									};
								}, res => {
									uni.showToast({
										title: '上传失败请重拍',
										icon: 'error',
										duration: 2000,
									});
								});
							}
						}
					})
				}

			},
			// 上传
			upload(filePath, type) {
				uni.showLoading({
					title: '图片上传中...',
					mask: true
				});
				let _this = this;
				uni.uploadFile({
					url: this.$BASE_URL + 'common/upload',
					// #ifdef MP-ALIPAY
					fileType: 'image',
					// #endif
					filePath: filePath,
					name: 'file',
					header: {
						token: this.userinfo.token
					},
					formData:{
						// #ifdef MP-ALIPAY
						type: 'ali',
						// #endif
					},
					success: (rs) => {
						uni.hideLoading();
						// let result = JSON.parse(rs.data)
						// this.form.front_image = result.data.fullurl;
						// this.just_show = false;
						let result = JSON.parse(rs.data);
						if (type == 0) {
							_this.$set(_this.f_file, 0, result.data.fullurl);
							_this.show_z = false;
						} else {
							_this.$set(_this.f_file, 1, result.data.fullurl);
							_this.show_f = false;
						};
						if (_this.f_file.length === 2 && _this.f_file[0] !== "" && _this.f_file[1] !== "") {
							_this.startIndent(_this.f_file);
						};
					},
					fail(err) {
						uni.hideLoading();
					}
				});
			},
			//识别
			startIndent(arr) {
				uni.showLoading({
					title: '识别中…'
				})
				api.subIndent({
					// #ifdef MP-ALIPAY
					files: arr[0]+','+arr[1],
					// #endif
					//#ifndef MP-ALIPAY
					files: arr,
					// #endif
				}).then(res => {
					uni.hideLoading();
					if (res.code == 1) {
						this.form = res.data;
						this.s_scuccess = true;
						// uni.hideLoading();
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							duration: 2500,
							complete: function(res) {}
						});
					};
				}).catch(e => {
					uni.hideLoading();
				})
			},
			// 提交
			submit() {
				// #ifdef MP-ALIPAY
				this.e_form.files = this.f_file[0]+','+this.f_file[1];
				// #endif
				//#ifndef MP-ALIPAY
				this.e_form.files = this.f_file;
				// #endif
				let clone = Object.assign(this.form, this.e_form);
				const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
				if (!this.xy) {
					uni.showToast({
						title: '请先勾选协议！',
						icon: 'none',
						duration: 1000
					});
					return;
				};
				// if (!reg.test(clone.idcard)) {
				// 	uni.showToast({
				// 		title: '请输入有效身份证号码！',
				// 		icon: 'none',
				// 		duration: 1000
				// 	});
				// 	return;
				// };
				if (!clone.policy_month) {
					uni.showToast({
						title: '请选择车险到期月份！',
						icon: 'none',
						duration: 1000
					});
					return;
				};
				uni.showLoading({
					title: '提交中，请稍等。',
					mask: true
				});
				this.submiting = true;
				api.subAuthen(clone).then(res => {
					if (res.code == 1) {
						this.submiting = false;
						uni.hideLoading();
						uni.navigateTo({
							url: '/pages/home/authen-car/authen-scuccess'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none',
							success: (res) => {
								setTimeout(() => {
									uni.hideLoading();
								}, 1500);
							}
						});
						this.submiting = false;

					}
				}).catch(e => {
					uni.showToast({
						title: '出错了！',
						icon: 'none',
						duration: 1500
					});
					this.submiting = false;
					uni.hideLoading();
				})
			},
			// 选择月份
			onchange({detail:{value}}) {
				if(value.length > 0){
					this.e_form.policy_month = value[0].value;
				};
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* #ifdef MP-ALIPAY */
	::v-deep .selected-area {
		flex: none !important;
		webkit-flex: none !important;
	}
	
	::v-deep .selected-item {
		padding: 24rpx 0 !important;
	}
	
	::v-deep .data-picke .uni-data-tree-input {
		display: none !important;
	}
	/* #endif */
	
	.owner {
		.crad-data {
			min-height: 1040rpx;
			background: #FBFBFB;
			border: 2px solid #E8E8E8;
			opacity: 1;
			border-radius: 20rpx;
			padding: 36rpx 30rpx 0 30rpx;
			box-sizing: border-box;

			.crad-item {
				padding-bottom: 44rpx;
				align-items: center;

				view {
					width: 40%;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				textarea {
					/* #ifndef MP-ALIPAY */
					width: 55%;
					/* #endif */
					/* #ifdef MP-ALIPAY */
					max-width: 55%;
					min-width: 55%;
					/* #endif */
					color: #595959;
					font-size: 28rpx;
					padding: 18rpx;
					height: 130rpx;
					text-align: right;
					border-radius: 8rpx;
					border: 1px solid #ededed;
					background-color: #fff;
				}

				input {
					width: 55%;
					padding: 18rpx;
					// font-size: 32rpx;
					font-size: 28rpx;
					font-family: PingFang SC;
					font-weight: 400;
					// color: #323232;
					color: #595959;
					text-align: right;
					border-radius: 8rpx;
					border: 1px solid #ededed;
					background-color: #fff;
				}
			}
		}

		.uplod-box {
			padding-top: 30rpx;
			padding-bottom: 40rpx;

			.img {
				width: 330rpx;
				height: 210rpx;
				background: #FFFFFF;
				border: 1px dashed #D5D5D5;
				border-radius: 20rpx;
				position: relative;
				overflow: hidden;

				.bg {
					width: 98%;
					height: 98%;
					position: absolute;
					left: 50%;
					top: 50%;
					margin-left: -49%;
					margin-top: -105rpx;
				}

				.tx {
					width: 100%;
					height: 100%;
					position: absolute;

					text {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #666666;
						padding-top: 6rpx;
					}

					// top: 50%;
					// left: 50%;
				}

				.opload-btn {
					width: 74rpx;
					height: 74rpx;
					border-radius: 50%;
					background: rgba(0, 0, 0, .3);

					// position: absolute;
					// top: 50%;
					// left: 50%;
					// margin-left: -37rpx;
					// margin-top: -37rpx;
					text {
						color: #fff;
						font-size: 45rpx;
					}
				}
			}
		}

		.owner-title {
			view {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #323232;
			}

			text {
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.b-gay {
			width: 100%;
			height: 20rpx;
			background: #F4F4F4;
		}

		.data-item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			.data-item-label {
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #1E1E20;

				text {
					font-size: 32rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #999999;
				}

				.is-sel {
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #555555;
				}
			}
			
			input,.data-picke{
				width: 460rpx !important;
				// flex: 1;
				box-sizing: border-box;
			}

		}

		.submit-box {
			width: 100%;
			// height: 128rpx;
			bottom: 0;
			background: #fff;
			position: fixed;
			border-top: 1px solid #DDDDDDFF;
			display: flex;
			flex-direction: column;
			padding: 5rpx 0;
			z-index: 99;

			.submit-btn {
				width: 360rpx;
				height: 88rpx;
				background: #F12F63;
				border-radius: 60rpx;
				font-size: 34rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
			}
		}

		.radio {

			.ax {
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #323232;

				text {
					color: #F12F63;
				}
			}
		}
	}

	.tips {
		padding-bottom: 20rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #999999;
	}


	.canvass {
		position: absolute;
		z-index: -1;
		left: -10000rpx;
		top: -10000rpx;
	}
</style>
